<template>
  <div>

    <div class="flow-box">
      <div class="title">{{ title }}</div>
      <condition :condition="condition" @addFlow="addFlow(0)" />
      <item v-for="(item, index) in list" :key="item.position" :item="item" @addFlow="addFlow(index+1)" @removeFlow="removeFlow(index)" />

      <el-dialog title="添加审批流程" :visible.sync="showAddDialog" width="30%">
        <el-form ref="addForm" :model="form">
          <el-form-item label="审批人" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门+姓名" :label-width="formLabelWidth">
            <el-input v-model="form.position" autocomplete="off" />
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <el-input v-model="form.role" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="addData">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <test :age.sync="age" />
    <h1>{{ age }}</h1>
  </div>
</template>

<script>
import condition from './condition'
import item from './item'
import test from './test'
export default {
  components: {
    condition,
    item,
    test
  },
  data() {
    return {
      title: '添加审批流程',
      condition: '在什么情况，由什么人来创建订单',
      list: [
        {
          title: '审批人',
          position: '销售一部-小春',
          role: '员工'
        },
        {
          title: '审批人',
          position: '销售一部-春春',
          role: '项目经理'
        }
      ],
      showAddDialog: false,
      form: {
        title: '审批人',
        position: '春哥',
        role: '老大'
      },
      formLabelWidth: '100px',
      addIndex: '',
      age: 0
    }
  },
  methods: {
    addFlow(index) {
      console.log('addFlow', index)
      this.showAddDialog = true
      this.addIndex = index
    },
    addData() {
      this.showAddDialog = false
      this.$refs.addForm.resetFields()
      this.list.splice(this.addIndex, 0, this.form)
    },
    removeFlow(index) {
      console.log('remove', index)
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
}
  .flow-box {
    width: 400px;
    min-height: 400px;
    /* border: 1px solid #000; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
  }
  .title {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid red;
    border-radius: 5px;
    background-color:cornflowerblue;
  }

  .flow-box input {
    border: 1px solid #ccc;
  }
</style>
